<template>
  <el-card class="monitor-card" :class="{ 'animate-pulse': loading }">
    <template #header>
      <div class="flex justify-between items-center">
        <span class="text-lg font-bold">系统信息</span>
        <el-tag type="info" size="small">{{ data.osName }}</el-tag>
      </div>
    </template>
    
    <el-skeleton :loading="loading" animated :rows="6">
      <template #default>
        <!-- 基础信息 -->
        <div class="grid grid-cols-2 gap-2 mb-4">
          <div class="info-item">
            <span>主机名</span>
            <span>{{ data.computerName }}</span>
          </div>
          <div class="info-item">
            <span>IP地址</span>
            <span>{{ data.computerIp }}</span>
          </div>
          <div class="info-item">
            <span>架构</span>
            <span>{{ data.osArch }}</span>
          </div>
          <div class="info-item">
            <span>版本</span>
            <span>{{ data.osVersion }}</span>
          </div>
          <div class="info-item">
            <span>制造商</span>
            <span>{{ data.manufacturer || 'N/A' }}</span>
          </div>
          <div class="info-item">
            <span>型号</span>
            <span>{{ data.model || 'N/A' }}</span>
          </div>
        </div>
        
        <!-- 运行状态 -->
        <div class="mb-4">
          <div class="flex justify-between mb-2">
            <span class="font-medium">运行状态</span>
            <el-tag size="small">
              运行: {{ formatUptime(data.uptime) }}
            </el-tag>
          </div>
          <div class="grid grid-cols-3 gap-2 text-center">
            <div class="bg-gray-100 dark:bg-gray-800 rounded p-2">
              <div class="text-lg font-bold">{{ data.processCount }}</div>
              <div class="text-xs text-gray-500">进程数</div>
            </div>
            <div class="bg-gray-100 dark:bg-gray-800 rounded p-2">
              <div class="text-lg font-bold">{{ data.threadCount }}</div>
              <div class="text-xs text-gray-500">线程数</div>
            </div>
            <div class="bg-gray-100 dark:bg-gray-800 rounded p-2">
              <div class="text-lg font-bold">{{ data.user }}</div>
              <div class="text-xs text-gray-500">当前用户</div>
            </div>
          </div>
        </div>
        
        <!-- 网络接口 -->
        <div v-if="data.networkInterfaces.length > 0">
          <div class="font-medium mb-2">网络接口</div>
          <div 
            v-for="net in data.networkInterfaces.slice(0, 2)" 
            :key="net.name"
            class="mb-2 text-sm"
          >
            <div class="flex items-center">
              <span class="font-mono mr-2">{{ net.name }}</span>
              <el-tag v-if="net.ipv4" size="small" type="info">
                {{ net.ipv4 }}
              </el-tag>
            </div>
            <div class="text-xs text-gray-500 mt-1">
              接收: {{ formatBytes(net.bytesRecv) }} 
              发送: {{ formatBytes(net.bytesSent) }}
            </div>
          </div>
        </div>
      </template>
    </el-skeleton>
  </el-card>
</template>

<script setup lang="ts">
import type { GetSysInfoRes } from '@/api/monitor/types';

defineProps<{
  data: GetSysInfoRes;
  loading: boolean;
}>();

// 字节格式化
const formatBytes = (bytes: number): string => {
  if (bytes <= 0) return '0 B';
  const k = 1024;
  const sizes = ['B', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};

// 运行时间格式化
const formatUptime = (seconds: number): string => {
  const days = Math.floor(seconds / (3600 * 24));
  const hours = Math.floor((seconds % (3600 * 24)) / 3600);
  const mins = Math.floor((seconds % 3600) / 60);
  return `${days}d ${hours}h ${mins}m`;
};
</script>

<style lang="scss" scoped>
.monitor-card {
  .info-item {
    @apply flex justify-between py-1 text-sm;
    span:first-child {
      @apply text-gray-500 dark:text-gray-400;
    }
  }
}
</style>